<template>
  <div class="login">
    <div class="title"></div>
    <div class="myform">
      <el-form :model="formdata" :rules="rules">
        <h3>
          <i class="el-icon-user-solid"></i>
          登录
        </h3>
        <el-form-item prop="user" class="users">
          <el-input
            prefix-icon="el-icon-user"
            placeholder="用户名"
            v-model="formdata.user"
            class="ipt"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pw">
          <el-input
            prefix-icon="el-icon-lock"
            style="margin-top: 50px"
            placeholder="密码"
            v-model="formdata.pw"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn" @click="submitfn"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
      <ul>
        <li>
          <el-checkbox v-model="checked">记住我</el-checkbox>
        </li>
        <li>
          <a
            class="layui-layout-right forget-password"
            href="javascript:alert('请联系超级管理员！')"
            >忘记密码?</a
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import instance from "../api/index";
export default {
  name: "MyLogin",
  data() {
    //自定义正则验证
    let userfn = function (rule, value, callback) {
      let rg = /^[a-z]\w{2,6}\w$/;
      if (rg.test(value)) return; //格式对 不处理
      return callback(new Error("用户格式不对"));
    };
    let pwfn = function (rule, value, callback) {
      let rg = /^\w{2,6}$/;
      if (rg.test(value)) return; //格式对 不处理
      return callback(new Error("用户格式不对"));
    };
    return {
      checked: true,
      formdata: {
        // user:"admin",
        // pw:"123456"
      },
      rules: {
        user: [{ validator: userfn, trigger: "blur" }],
        pw: [{ validator: pwfn, trigger: "blur" }],
      },
      newdebouncefn: null, //用于接受防抖封装后 的业务函数
    };
  },
  created() {
    this.newdebouncefn = this.debouncefn(this.loginfn, 2000);
    //就是防抖封装后的心的业务函数
  },
  methods: {
    submitfn() {
      //点击提交业务
      this.newdebouncefn();
    },
    async loginfn() {
      //登录业务
      let user = this.formdata.user;
      let pw = this.formdata.pw;
      let { data } = await instance.post("/login", { user, pw });
      console.log(data);
      // 存token
      if (data.message === "fail") return this.$message.error("登录失败");
      if (data.message === "success") {
        localStorage.setItem("token", data.data.token);
        this.$message({
          type: "success",
          message: "登录成功",
          duration: 1000,
          onClose: () => {
            this.$router.push("/home/1-1");
          },
        });
      }
    },
  },
};
</script>

<style scoped>
.users {
  position: relative;
  width: 100%;
  height: 30px;
}
.myform ul {
  display: flex;
  justify-content: space-between;
}
.myform ul li a {
  text-decoration: none;
  color: #009688;
  font-size: 15px;
}
.users .ren .rens {
  font-size: 18px;
}
.users .ren {
  position: absolute;
  top: 0px;
  left: 20px;
  width: 40px;
  height: 30px;
  color: red;
  z-index: 999;
}
.login {
  background: #009688;
  width: 100vw;
  height: 100vh;
}
h3 {
  margin-left: 110px;
  font-size: 27px;
  font-weight: normal;
  color: #444444;
}
.login .myform {
  box-sizing: border-box;
  width: 370px;
  height: 370px;
  position: absolute;
  left: 51%;
  top: 25%;
  margin-left: -200px;
  mask-type: -300px;
  background: #fff;
  padding: 20px;
}
.login .myform .el-input {
  margin-top: 30px;
}
.login .btn {
  width: 100%;
  margin-top: 10px;
}
.login .tip {
  font-size: 12px;
  color: red;
  text-align: center;
}
</style>